<template>
	<view class="container" :style="colorStyle">
		<view class="header flex flex-align flex-center">请填写姓名手机号等相关信息</view>
		<view class="main">
			<view class="list flex flex-align">
				<view class="left">姓名</view>
				<input type="text" placeholder="请输入姓名" v-model="name" />
			</view>
			<view class="list flex flex-align">
				<view class="left">手机号</view>
				<input type="number" placeholder="请输入手机号" v-model="phone" />
			</view>
			<!-- <view class="list flex flex-align">
				<view class="left">微信号</view>
				<input type="text" placeholder="请输入微信号" v-model="wetchat" />
			</view> -->
			<view class="list flex flex-align">
				<view class="left">社区名称</view>
				<input type="text" placeholder="请输入社区名称" v-model="sheName" />
			</view>
			<view class="list flex flex-align">
				<view class="left">代理邀请码</view>
				<input type="text" placeholder="请输入代理邀请码" v-model="inviter_code" />
			</view>
			<view class="list flex flex-align flex-bt" style="position: relative;">
				<view class="left flex flex-align" style="width: 660rpx;">
					<view class="name" style="width: 150rpx;">所在位置</view>
					<input type="text" :disabled="true" placeholder="请输入所在位置" v-model="address" />
				</view>
				<view class="right">
					<text class="iconfont icon-ic_rightarrow"></text>
				</view>
				<view @click="showMulLinkageThreePicker" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 11;background: transparent;"></view>
			</view>
			<view class="list flex flex-align">
				<view class="left">详细地址</view>
				<input type="text" placeholder="请输入详细地址" v-model="addInfo" />
			</view>
			<view class="list flex " style="height: auto;padding: 20rpx 0;">
				<view class="left">门头照</view>
				<image :src="images" mode="" style="width: 200rpx;height: 200rpx;" @click="uploadpic"></image>
			</view>
			<view class="btns" @click="submite" v-if="status==0">{{status==0&&dataInfo!=''?'审核中':'提交申请'}}</view>
		</view>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		<!-- <mpvue-city-picker themeColor="#222" ref="mpvueCityPicker"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker> -->
		 <areaWindow ref="areaWindow" :display="display" :address="addressInfo" @submit="OnChangeAddress" @changeClose="changeClose"></areaWindow>
	</view>
</template>

<script>
	// var QQMapWX = require('@/common/qqmap-wx-jssdk.js');
	// var qqmapsdk;
	// import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import areaWindow from '@/components/areaWindow';
	import AddressParse from '../components/zh-address-parse.min.js'
	import colors from '@/mixins/color.js';
	import {shenTaunzhang,getmunityInfo} from '@/api/api.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			areaWindow
		},
		mixins: [colors],
		data() {
			return {
				name: '',
				phone: '',
				wetchat: '',
				sheName: '',
				address: '',
				addInfo: '',
				longitude:'113.74161',
				latitude:'34.39605',
				status:'',
				images:'/static/up_img.png',
				inviter_code:'',
				display: false,
				addressInfo:'',
				dataInfo:'',
				canvasStatus:false,
				canvasHeight: "",
				canvasStatus: false,
			}
		},
		onLoad(e) {
			// qqmapsdk = new QQMapWX({
			// 	key: 'KG3BZ-MIYLZ-VDCXE-72RBD-S3LTS-LYBZM'
			// });
			this.getData()
			// this.getAddress()
			
		},
		methods: {
			getData(){
				let that = this
				getmunityInfo().then(res => {
					console.log(res)
					
					if(res.status==200){
						// that.getData()
						if(res.data.info){
							that.dataInfo = res.data.info
							that.status =res.data.info.is_show
							that.name = res.data.info.name
							that.phone = res.data.info.phone
							that.wetchat = res.data.info.wx_code
							that.longitude = res.data.info.longitude
							that.latitude = res.data.info.latitude
							that.sheName = res.data.info.introduction
							that.address = res.data.info.address_area
							that.addInfo = res.data.info.detailed_address
							that.images = res.data.info.image
							that.inviter_code = res.data.info.inviter_code
						}else{
							if (that.$wechat.isWeixin()) {
								that.$wechat.wechatEvevt('getLocation', {
									type: 'gcj02',
								}).then(res => {
									that.longitude = res.longitude
									that.latitude = res.latitude
								});
							}
						}
					}
				})
				
			},
			showMulLinkageThreePicker() {
				this.display = true;
			},
			changeClose: function() {
				this.display = false;
			},
			OnChangeAddress(address) {
				this.address = ''
				address.map(v =>{
					this.address = this.address+ v.label
				})
			},
			submite() {
				let that = this
				if(that.status==0&&that.dataInfo!=''){
					return
				}
				if(that.images=='/static/up_img.png'){
					that.$util.Tips({
						title:'门头照不能为空'
					});
					return
				}
				let data ={name:that.name,phone:that.phone,longitude:that.longitude,latitude:that.latitude,community_name:that.sheName,address_area:that.address,address:that.addInfo,image:that.images,inviter_code:that.inviter_code}
				shenTaunzhang(data).then(res => {
					that.$util.Tips({
						title:res.msg
					});
					if(res.status==200){
						that.getData()
					}
				})
				
			},
			uploadpic(){
				let that = this
				that.canvasStatus = true
				that.$util.uploadImageChange('upload/image', (res) => {
					// if (userInfo !== undefined) {
					that.images = res.data.url
					// }
					that.canvasStatus = false
				}, (res) => {
					that.canvasStatus = false
				}, (res) => {
					that.canvasWidth = res.w
					that.canvasHeight = res.h
				});
			},
			
			/**
			 * 下载小程序新版本并重启应用
			 */
			
			
			formatLocation(longitude, latitude) {
				if (typeof longitude === 'string' && typeof latitude === 'string') {
					longitude = parseFloat(longitude)
					latitude = parseFloat(latitude)
				}

				longitude = longitude.toFixed(2)
				latitude = latitude.toFixed(2)

				return {
					longitude: longitude.toString().split('.'),
					latitude: latitude.toString().split('.')
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff;
	}
	.fontcolor {
		color: var(--view-theme);
	}
	.header {
		height: 180rpx;
		color: #fff;
		background:var(--view-theme);
		font-size: 32rpx;
	}
	.flex-align{align-items: center;}
	.main {
		margin: 30rpx;

		.list {
			height: 100rpx;
			border-bottom: 1px solid #eee;

			.left {
				width: 150rpx;
			}

			view,
			input {
				font-size: 28rpx;
			}
			input {
				width: 500rpx;
			}
		}

		.btns {
			background: var(--view-theme);
			color: #fff;
			font-size: 28rpx;
			line-height: 90rpx;
			border-radius: 90rpx;
			width: 600rpx;
			margin: 50rpx auto;
			text-align: center;
		}
	}
</style>